<template>
	<view>
		<view class="order_type_tab_block">
			<view class="order_type_tab_box">
				<view
					:class="['order_type_tab_head', item.status == table.status ? 'order_type_tab_head_active' : '']"
					@click="handelChangeOrderType(item)"
					v-for="item in orderTab"
					:key="item.status">
					<view class="type_text">{{ item.name }}</view>
					<view class="active_type"></view>
				</view>
			</view>
		</view>
		<view class="order_list_box">
			<template v-if="table.list.length > 0">
				<view class="list_item_box" v-for="item in table.list" @click.stop="toDetail(item)">
					<view class="order_header">
						<view class="order_type">{{ item.typeStr }}</view>
						<view class="order_status">{{ item.statusStr }}</view>
					</view>
					<view class="order_product">
						<image class="product_pic" :src="item.goodsPic"></image>
						<view class="product_name_box">
							<view class="product_name">{{ item.goodsName }}</view>
							<view class="income_type">订单编号：{{ item.orderId }}</view>
							<view class="item_info">
								<view class="info_label">下单用户：</view>
								<view class="info_value">
									<image class="user_pic" :src="item.userAvatar"></image>
									<view class="user_name">{{ item.userNickName }}</view>
								</view>
							</view>
							<view class="income_type" v-if="item.payTime">付款时间：{{ item.payTime }}</view>
							<view class="income_type" v-if="item.finishTime">到账时间：{{ item.finishTime }}</view>
						</view>
					</view>
					<view class="income_block">
						<view class="income_money_box">
							<view class="income_money">¥{{ item?.payAmount }}</view>
							<view class="income_text">付款金额</view>
						</view>
						<view class="income_money_box">
							<view class="income_money">¥{{ item.status === 2 ? "0.00" : item?.amount }}</view>
							<view class="income_text">工作室收益</view>
						</view>
						<view class="income_money_box" v-if="identity == 1">
							<view class="income_money">{{ item.status === 2 ? "0.00" : item?.studioBalanceRecordNewPetVO?.petIncome }}</view>
							<view class="income_text">收益人收益</view>
						</view>
					</view>
					<view class="order_data_info" v-if="identity == 1 && item?.studioBalanceRecordNewPetVO">
						<view class="item_info">
							<view class="info_label">收益人：</view>
							<view class="info_value">
								<image class="user_pic" :src="item?.studioBalanceRecordNewPetVO?.petAvatar"></image>
								<view class="user_name">
									<template v-if="item?.studioBalanceRecordNewPetVO?.petRealName">{{ item?.studioBalanceRecordNewPetVO?.petRealName }}｜</template>
									{{ item?.studioBalanceRecordNewPetVO?.petNickName }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<uni-load-more iconType="auto" :status="table.loading" />
			</template>
			<view class="empty_box" v-else>
				<image class="empty_img" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-54.png"></image>
				<view>暂无数据~</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { onNavigationBarButtonTap, onLoad, onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import api from "@/api/index";
import { useStudioStoreToRefs } from "@/store/useStudioStore";

let { identity, studio, studioBalance } = useStudioStoreToRefs();

const table = reactive<{
	loading: string;
	list: [];
	page: number;
	studioId: number | string;
	userId: number | string;
	limit: number;
	status: number | string;
}>({
	loading: "more",
	list: [],
	page: 1,
	studioId: "",
	userId: "",
	limit: 20,
	status: -1
});

const orderTab = reactive([
	{ name: "全部", status: -1 },
	{ name: "待结算", status: 1 },
	{ name: "已结算", status: 0 },
	{ name: "已失效", status: 2 }
]);
// 数据初始化
const onDataInit = async (info = {}) => {
	table.list = [];
	table.page = 1;
	await onDataGet();
};
// 获取数据
const onDataGet = async () => {
	uni.showLoading({
		title: "加载中",
		mask: true
	});
	table.loading = "loading";
	try {
		const {
			data: { total = 0, records = [] }
		} = await api({
			method: "get",
			contentType: "json",
			url: `/mall/studio/balanceRecord/page`,
			data: {
				page: table.page,
				limit: table.limit,
				studioId: table.studioId,
				userId: "",
				status: table.status
			}
		});
		table.list = table.page == 1 ? records : table.list.concat(records);
		if (!records.length || table.list.length >= total) {
			table.loading = "noMore";
		} else {
			table.loading = "more";
		}
		uni.hideLoading();
	} catch (error) {
		uni.hideLoading();
		table.loading = "more";
	}
};

const handelChangeOrderType = async (item) => {
	table.status = item.status;
	await onDataInit();
};

const toDetail = (item) => {
	// goodsType 服务类型 0-商城商品 1-上门喂养，2-上门遛狗，3-上门洗护,4-增值服务
	if (item.goodsType == 0) {
		uni.navigateTo({
			url: `/pages/shopping/orderDetailes/index?orderId=${item.orderId}&source=1`
		});
	} else {
		if ([1, 2, 3].includes(Number(item.goodsType))) {
			uni.navigateTo({
				url: `/pages/studioOrders/orderDetail/index?id=${item.orderId}&orderType=0&pageSource=1`
			});
		} else {
			uni.navigateTo({
				url: `/pages/studioOrders/addedServicesDetail/index?id=${item.orderId}&orderType=0&pageSource=1`
			});
		}
	}
};
// 页面下拉刷新
onPullDownRefresh(async () => {
	console.log("onPullDownRefresh");
	if (table.loading == "loading") {
		uni.stopPullDownRefresh();
	} else {
		try {
			await onDataInit();
		} catch (error) {}
		uni.stopPullDownRefresh();
	}
});
// 触底
onReachBottom(() => {
	console.log("onReachBottom");
	if (table.loading == "noMore") return false;
	table.page++;
	onDataGet();
});

//监听导航右上按钮事件
onNavigationBarButtonTap(() => {
	uni.navigateTo({
		url: "/pages/myStudio/studio/balanceDetails/index"
	});
});
onLoad((options) => {
	table.studioId = options?.studioId;
	table.userId = options?.userId;
	if (options.hasOwnProperty("status")) {
		table.status = options?.status;
	}
	onDataGet();
});
</script>

<style scoped lang="scss">
.order_type_tab_block {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1;

	.order_type_tab_box {
		display: flex;
		justify-content: space-evenly;
		width: 100%;
		background: #ffffff;
		box-sizing: border-box;
		border-top: 1rpx solid #e4e6e6;

		.order_type_tab_head {
			position: relative;
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: center;
			height: 88rpx;
			padding-top: 26rpx;
			box-sizing: border-box;

			.type_text {
				font-weight: 400;
				font-size: 28rpx;
				height: 100%;
				color: #5c5e5e;
				text-align: center;
			}
		}

		.order_type_tab_head_active {
			.type_text {
				font-weight: bold;
				font-size: 32rpx;
				color: #1b2120;
			}

			.active_type {
				bottom: 0;
				width: 32rpx;
				height: 8rpx;
				background: var(--color-primary);
				border-radius: 4rpx;
			}
		}

		.studio_down {
			width: 152rpx;
			display: flex;
			align-items: center;
			flex-direction: row;
			height: 88rpx;
			padding: 0 14rpx;
			box-sizing: border-box;
			box-shadow: -12rpx 0 20rpx -18rpx rgba(0, 0, 0, 0.2);

			.studio_name {
				width: 96rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #1a1a1a;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-right: 8rpx;
			}
		}
	}

	.studio_down_list_box {
		height: 100vh;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);

		.studio_down_list {
			width: 100%;
			padding: 0 40rpx;
			box-sizing: border-box;
			background: #ffffff;
			position: relative;
			border-top: 1rpx solid #e4e6e6;

			.studio_name_box {
				display: flex;
				justify-content: space-between;
				height: 128rpx;
				align-items: center;
				box-sizing: border-box;
				border-bottom: 1rpx solid #e4e6e6;

				.studio_name {
					font-weight: 400;
					font-size: 32rpx;
					color: #7c807f;
				}

				.select_pic {
					width: 48rpx;
					height: 48rpx;
				}

				.studio_name_active {
					color: #1b2120;
				}
			}

			.studio_name_box:last-child {
				border: none;
			}
		}
	}
}

.order_list_box {
	padding: 32rpx;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: calc(var(--safe-area-bottom) + 32rpx);
	padding-top: calc(88rpx + 32rpx);

	.list_item_box {
		width: 100%;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;

		.order_header {
			display: flex;
			justify-content: space-between;
			padding-bottom: 26rpx;
			border-bottom: 1rpx solid #f9f6f6;

			.order_type {
				font-weight: 400;
				font-size: 30rpx;
				color: #1b2120;
			}

			.order_status {
				font-weight: 400;
				font-size: 26rpx;
				color: #6363ff;
			}
		}

		.order_product {
			display: flex;
			flex-direction: row;
			margin-top: 24rpx;

			.product_pic {
				width: 160rpx;
				height: 160rpx;
				border-radius: 24rpx;
			}

			.product_name_box {
				margin-left: 16rpx;

				.product_name {
					font-weight: 400;
					font-size: 30rpx;
					color: #1b2120;
					margin-bottom: 24rpx;
				}

				.item_info {
					display: flex;
					flex-direction: row;
					margin-bottom: 16rpx;

					.info_label {
						font-weight: 400;
						font-size: 24rpx;
						color: #808080;
					}

					.info_value {
						display: flex;
						flex-direction: row;
						margin-right: 16rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #7c807f;

						.user_pic {
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							margin-right: 8rpx;
						}

						.user_name {
							font-weight: 400;
							font-size: 24rpx;
							color: #7c807f;
						}
					}
				}

				.income_type {
					font-weight: 400;
					font-size: 24rpx;
					color: #808080;
					margin-bottom: 16rpx;
				}

				.income_type:last-child {
					margin-bottom: 0;
				}
			}
		}

		.income_block {
			width: 100%;
			margin-top: 16rpx;
			display: flex;
			justify-content: space-between;
			padding: 32rpx 24rpx;
			box-sizing: border-box;
			background: #f9f6f6;
			border-radius: 24rpx;

			.income_money_box {
				display: flex;
				flex-direction: column;
				flex: 1;

				.income_money {
					font-weight: bold;
					font-size: 26rpx;
					color: #1b2120;
				}

				.income_text {
					font-weight: 400;
					font-size: 24rpx;
					color: #7c807f;
					margin-top: 20rpx;
				}
			}
		}

		.order_data_info {
			margin-top: 24rpx;
			position: relative;

			.item_info {
				display: flex;
				flex-direction: row;
				margin-top: 16rpx;

				.info_label {
					font-weight: 400;
					font-size: 24rpx;
					color: #808080;
				}

				.info_value {
					display: flex;
					flex-direction: row;
					margin-right: 16rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #7c807f;

					.user_pic {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						margin-right: 8rpx;
					}

					.user_name {
						font-weight: 400;
						font-size: 24rpx;
						color: #7c807f;
					}
				}
			}

			.change_icon {
				width: 80rpx;
				text-align: right;
				position: absolute;
				bottom: -6rpx;
				right: 0;
			}
		}
	}
}

.empty_box {
	text-align: center;
	font-weight: 400;
	font-size: 32rpx;
	color: #1b2120;

	.empty_img {
		width: 400rpx;
		height: 315rpx;
		margin-top: 320rpx;
		margin-bottom: 50rpx;
	}
}
</style>
